/*
 * Copyright (c) 2024 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React, { useState } from 'react';
import { View, Text, Image, FlatList, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
import PlaylistHeader from './PlaylistHeader';
import { songs, Track } from '../model';
import CurPlaySong from './CurPlaySong';
import { useBreakpointValue } from '@hadss/react_native_adaptive_layout/src/hooks/useBreakpointValue';
import musicPlayer from '../../util';

const SongList = () => {
  const [currentSong, setCurrentSong] = useState<Track>(songs[0]);
  const [isPlaying, setIsPlaying] = useState(false);

  let itemWidth = useBreakpointValue({
    base: Dimensions.get('window').width - 32,
    sm: Dimensions.get('window').width - 32,
    md: (Dimensions.get('window').width - 72) / 2,
  });

  let itemLeft = useBreakpointValue({
    base: 16,
    sm: 16,
    md: 24,
  });

  let numColumns = useBreakpointValue({ base: 1, sm: 1, md: 2, lg: 2 });

  const renderItem = (item: Track, index: number) => (
    <TouchableOpacity
      style={[styles.songItem, { width: itemWidth, marginLeft: itemLeft }]}
      onPress={() => {
        setCurrentSong(item);
        musicPlayer.playTrackByIndex(index);
        setIsPlaying(true);
      }}
    >
      <View style={styles.songInfo}>
        <Text style={styles.songTitle}>{item.title}</Text>
        <View style={{ flexDirection: 'row', top: 2 }}>
          <Image
            source={require('../../../../asset/acoustic.png')}
            style={styles.acoustic}
          />
          <Text style={styles.songArtist}>{item.artist}</Text>
        </View>
      </View>
      <View style={{ flex: 1 }} />
      <Image
        source={require('../../../../asset/song_item_icon.svg')}
        style={styles.songIcon}
      />
    </TouchableOpacity>
  );

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={songs}
        renderItem={({ item, index }) => renderItem(item, index)}
        keyExtractor={(item) => item.songID}
        ListHeaderComponent={<PlaylistHeader />}
        numColumns={numColumns}
        key={numColumns}
        showsVerticalScrollIndicator={false}
      />
      <CurPlaySong
        song={currentSong}
        setCurrentSong={setCurrentSong}
        isPlaying={isPlaying}
        setIsPlaying={setIsPlaying}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  songItem: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
    height: 64,
    alignItems: 'center',
  },
  songInfo: {
    flexDirection: 'column',
    justifyContent: 'center',
  },
  songTitle: {
    fontSize: 16,
    fontWeight: '500',
    lineHeight: 21,
    color: 'rgba(0, 0, 0, 0.9)',
  },
  songArtist: {
    fontSize: 12,
    color: 'rgba(0, 0, 0, 0.4)',
    left: 4,
    lineHeight: 16,
  },
  songIcon: {
    width: 20,
    height: 20,
  },
  acoustic: {
    width: 16,
    height: 16,
  },
});

export default SongList;
